<template>
    <n-card :bordered="false" content-style="padding: 0">
        <n-card :bordered="false" content-style="padding: 0; display: flex; justify-content: space-between;">
            <n-space>
                <n-form-item label="编号" label-placement="left" :show-feedback="false">
                    <n-input size="small" v-model:value="form.code"/>
                </n-form-item>
            </n-space>
            <n-space>
                <n-button @click="handleSelectOnClick" size="small" type="info">查询</n-button>
            </n-space>
        </n-card>
        <n-card :bordered="false" content-style="padding: 10px 0; display: flex; justify-content: space-between;">
            <n-space>
                <n-button @click="handleInsertOnClick" size="small" type="info">新增</n-button>
            </n-space>
            <n-space>
                <n-tooltip placement="bottom">
                    <template #trigger>
                        <n-icon size="22">
                            <SettingsIcon/>
                        </n-icon>
                    </template>
                   列设置
                </n-tooltip>
            </n-space>
        </n-card>
        <n-data-table
            table-layout="fixed"
            :bordered="false"
            :loading="loading"
            :columns="columns"
            :data="records"
            :pagination="pagination"
            remote
        />
        <ParamModal
            :show="ModalData.show"
            :title="ModalData.title"
            :row="ModalData.row"
            @handleCloseOnClick="handleCloseOnClick"
            @handleSelectOnClick="handleSelectOnClick"
        />
    </n-card>
</template>
<script lang="ts" setup>
import { NSpace, NButton, DataTableColumn } from 'naive-ui'
import { reactive, onMounted, toRefs, h, computed, ComputedRef } from 'vue'
import { Settings as SettingsIcon } from '@vicons/carbon'
import { usePagination } from '@/hooks/usePagination'
import { basicColumns } from './columns'
import { getParamPage, deleteParam } from '@/api/system/param'
import { IConfirmMessage, IMessage } from '@/utils/message'
import ParamModal from './modal/ParamModal.vue'

const state = reactive({
    loading: false as boolean,
    records: [] as Array<Param>,
    form: {} as Param,
    pagination: usePagination(handleSelectOnClick),
    ModalData: {
        show: false,
        title: '',
        row: {} as Param
    }
})

const {
    loading,
    records,
    pagination,
    form,
    ModalData
} = toRefs(state)

const columns: ComputedRef<Array<DataTableColumn<Param>>> = computed (() => {
    return [
        ...basicColumns,
        {
            key: 'action',
            title: '操作',
            render(row: Param) {
                return h(
                    NSpace,
                    () => [
                        h(
                            NButton,
                            {
                                size: 'tiny',
                                onClick: () => handleUpdateOnClick(row)
                            },
                            {default: () => '修改'}
                        ),
                        h(
                            NButton,
                            {
                                size: 'tiny',
                                onClick: () => handleDeleteOnClick(row)
                            },
                            {default: () => '删除'}
                        )
                    ]
                )
            }
        }
    ]
})

onMounted(() => {
    handleSelectOnClick()
})

async function handleSelectOnClick(){
    state.loading = true
    const { data } = await getParamPage(state.pagination, state.form)
    state.records = data.records
    state.pagination.pageCount = data.pages
    state.loading = false
}

const handleInsertOnClick = () => {
    state.ModalData.row = {} as Param
    state.ModalData.show = true
    state.ModalData.title = '新增'
}

const handleUpdateOnClick = (row: Param) => {
    state.ModalData.row = row
    state.ModalData.show = true
    state.ModalData.title = '修改'
}

const handleDeleteOnClick = (row: Param) => {
    IConfirmMessage({
        content: '确认删除？',
        onSuccess: async () => {
            const{ message } = await deleteParam(row.id)
            IMessage({content: message})
            handleSelectOnClick()
        }
    })
}

const handleCloseOnClick = () => {
    state.ModalData.show = false
}

</script>